import Vue from 'vue'
import Vuex from 'vuex'
// 加载本地存储模块
import { setItem, getItem } from '@/utils/storage'

Vue.use(Vuex)

// 声明存储token的key,存入一个常量中
const TOKEN_KEY = 'USER_TOKEN'
const TOKEN_KEY_SEARCHTEXT = 'SEARCH_TEXT'
export default new Vuex.Store({
  // token存储:
  // 1、本地存储： 获取麻烦，数据不是响应式，持久化
  // 2、Vuex（容器）：获取方便，数据是响应式，页面刷新、关闭时数据会重置
  // 所以token存储可以采用Vuex + 本地存储
  state: {
    // 一个对象，内部存储了用户信息，token等
    // user: localStorage.getItem('USER_TOKEN'),
    user: getItem(TOKEN_KEY),
    searchText: getItem(TOKEN_KEY_SEARCHTEXT)
  },
  mutations: {
    // 登陆成功后修改user
    setUser (state, data) {
      // 修改user
      state.user = data
      // user修改后，存入本地，防止刷新丢失
      // 本地存储会把对象当做字符串存储，需要先转换成JSON字符串
      // 存储形式，键值对      键            值
      // localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user))
      setItem(TOKEN_KEY, state.user)
    },
    // 搜索历史
    setSearchText (state, data) {
      state.searchText = data
      setItem(TOKEN_KEY_SEARCHTEXT, state.searchText)
    }
  },
  actions: {},
  modules: {}
})
